<template>
  <div id="main">
    <div id='myChart'
         ref="myChart"
    >
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
// import {mapState} from 'vuex'

export default {
  name: 'echarts',
  props: {
    'list': Array
  },
  data () {
    return {
      resData: '',
      echartsOption: {
        backgroundColor: '#21202D',
        title: {
          text: '',
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        yAxis: {
          scale: true,
          axisLine: { lineStyle: { color: '#8392A5' } },
          splitLine: { show: false }
        },
        grid: {
          bottom: 80
        },
        dataZoom: [{
          textStyle: {
            color: '#8392A5'
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          dataBackground: {
            areaStyle: {
              color: '#8392A5'
            },
            lineStyle: {
              opacity: 0.8,
              color: '#8392A5'
            }
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }, {
          type: 'inside'
        }],
        series: [
          {
            name: 'K线',
            type: 'k',
            data: [],
            itemStyle: {
              normal: {
                color: '#0CF49B',
                color0: '#FD1050',
                borderColor: '#0CF49B',
                borderColor0: '#FD1050'
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                [
                  {
                    name: 'from lowest to highest',
                    type: 'min',
                    valueDim: 'lowest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      normal: { show: false },
                      emphasis: { show: false }
                    }
                  },
                  {
                    type: 'max',
                    valueDim: 'highest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      normal: { show: false },
                      emphasis: { show: false }
                    }
                  }
                ]
              ]
            }
          }
        ]
      }
    }
  },
  created () {
    // this.setEchartOption()
  },
  mounted () {
    this.setEchartOption()
    this.myChart = echarts.init(document.getElementById('myChart'))
    this.myChart.setOption(this.echartsOption)
  },
  computed: {
    // ...mapState(['previewData']),
    dataList () {
      return this.$store.state.previewData
    }
  },
  watch: {
    dataList (a, b) {
      if (a !== b) {
        this.setEchartOption()
        this.myChart = echarts.init(document.getElementById('myChart'))
        this.myChart.setOption(this.echartsOption)
      }
    }
  },
  methods: {
    setEchartOption () {
      // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
      this.resData = splitData(this.dataList)
      this.echartsOption.xAxis.data = this.resData.categoryData
      this.echartsOption.series[0].data = this.resData.values

      function splitData (rawData) {
        var categoryData = []
        var values = []
        for (var i = 0; i < rawData.length; i++) {
          categoryData.push(rawData[i].splice(0, 1)[0])
          values.push(rawData[i])
        }
        return {
          categoryData: categoryData,
          values: values
        }
      }
    }
  }
}
</script>
<style scoped>
  #myChart{
    width: 70%;
    height: 500px;
    margin: 0 auto;
  }

</style>
